<template>
  <div class="vip-settings-page">
    <el-card>
      <template #header>
        <span class="title">⚙️ VIP卡设置</span>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 卡等级设置 -->
        <el-tab-pane label="卡等级设置" name="levels">
          <el-button type="primary" size="small" @click="handleAddLevel" style="margin-bottom: 15px;">
            <el-icon><Plus /></el-icon>
            新增等级
          </el-button>
          
          <el-table :data="levelSettings" border>
            <el-table-column prop="level" label="等级" width="120">
              <template #default="{ row }">
                <el-tag :type="getLevelTag(row.level)">
                  {{ getLevelName(row.level) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="minConsumption" label="消费门槛" width="150">
              <template #default="{ row }">
                <el-input-number v-model="row.minConsumption" :min="0" size="small" />
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="折扣" width="150">
              <template #default="{ row }">
                <el-input-number v-model="row.discount" :min="0.1" :max="1" :step="0.05" :precision="2" size="small" />
                <span style="margin-left: 5px;">{{ (row.discount * 10).toFixed(1) }}折</span>
              </template>
            </el-table-column>
            <el-table-column prop="pointsRate" label="积分倍率" width="150">
              <template #default="{ row }">
                <el-input-number v-model="row.pointsRate" :min="1" :max="10" size="small" />
                <span style="margin-left: 5px;">倍</span>
              </template>
            </el-table-column>
            <el-table-column prop="annualFee" label="年费" width="150">
              <template #default="{ row }">
                <el-input-number v-model="row.annualFee" :min="0" size="small" />
              </template>
            </el-table-column>
            <el-table-column prop="color" label="卡面颜色" width="150">
              <template #default="{ row }">
                <el-color-picker v-model="row.color" size="small" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 充值设置 -->
        <el-tab-pane label="充值设置" name="recharge">
          <el-button type="primary" size="small" @click="handleAddPlan" style="margin-bottom: 15px;">
            <el-icon><Plus /></el-icon>
            新增方案
          </el-button>
          
          <el-table :data="rechargePlans" border>
            <el-table-column prop="name" label="方案名称" width="200" />
            <el-table-column prop="amount" label="充值金额" width="150">
              <template #default="{ row }">
                ¥{{ row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="bonus" label="赠送金额" width="150">
              <template #default="{ row }">
                ¥{{ row.bonus }}
              </template>
            </el-table-column>
            <el-table-column prop="total" label="实际到账" width="150">
              <template #default="{ row }">
                <span style="color: #67c23a; font-weight: bold;">¥{{ row.amount + row.bonus }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="enabled" label="启用" width="80">
              <template #default="{ row }">
                <el-switch v-model="row.enabled" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ $index }">
                <el-button link type="danger" @click="handleDeletePlan($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 升级规则 -->
        <el-tab-pane label="升级规则" name="upgrade">
          <el-form label-width="150px">
            <el-form-item label="自动升级">
              <el-switch v-model="upgradeSettings.autoUpgrade" />
              <div class="form-tip">开启后，达到消费门槛自动升级</div>
            </el-form-item>
            <el-form-item label="降级规则">
              <el-switch v-model="upgradeSettings.allowDowngrade" />
              <div class="form-tip">会员长期未消费是否自动降级</div>
            </el-form-item>
            <el-form-item label="降级周期" v-if="upgradeSettings.allowDowngrade">
              <el-input-number v-model="upgradeSettings.downgradeDays" :min="30" />
              <span style="margin-left: 10px;">天</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="save-button">
        <el-button type="primary" size="large" @click="handleSaveSettings">
          <el-icon><Select /></el-icon>
          保存设置
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Select } from '@element-plus/icons-vue'

const activeTab = ref('levels')

const levelSettings = ref([
  { level: 'silver', minConsumption: 10000, discount: 0.95, pointsRate: 1, annualFee: 0, color: '#c0c0c0' },
  { level: 'gold', minConsumption: 50000, discount: 0.90, pointsRate: 1.5, annualFee: 200, color: '#ffd700' },
  { level: 'diamond', minConsumption: 100000, discount: 0.85, pointsRate: 2, annualFee: 500, color: '#b9f2ff' }
])

const rechargePlans = ref([
  { name: '充500送50', amount: 500, bonus: 50, enabled: true },
  { name: '充1000送150', amount: 1000, bonus: 150, enabled: true },
  { name: '充2000送400', amount: 2000, bonus: 400, enabled: true },
  { name: '充5000送1200', amount: 5000, bonus: 1200, enabled: true }
])

const upgradeSettings = reactive({
  autoUpgrade: true,
  allowDowngrade: false,
  downgradeDays: 180
})

const getLevelTag = (level) => {
  const map = { silver: '', gold: 'warning', diamond: 'danger' }
  return map[level]
}

const getLevelName = (level) => {
  const map = { silver: '银卡', gold: '金卡', diamond: '钻石卡' }
  return map[level]
}

const handleAddLevel = () => {
  ElMessage.info('新增等级')
}

const handleAddPlan = () => {
  rechargePlans.value.push({
    name: '新方案',
    amount: 0,
    bonus: 0,
    enabled: true
  })
}

const handleDeletePlan = (index) => {
  rechargePlans.value.splice(index, 1)
  ElMessage.success('删除成功')
}

const handleSaveSettings = () => {
  ElMessage.success('设置保存成功')
}
</script>

<style scoped>
.vip-settings-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.stat-overview {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.save-button {
  margin-top: 30px;
  text-align: center;
}
</style>

